<template>
  <view>
    <view class="list">
      <view @click="toggle" class="icon">
        <tui-icon v-if="hasChildren" :name="isOpen ? 'arrowdown' : 'arrowright'"/>
        <text v-else style="margin: 0 8px;"></text>
      </view>
      <view class="container" @click='nav(node.projectPlanId,node.progress)'>
        <view>{{ node.wbs }}-{{ node.taskName }}</view>
        <view>起始:{{ node.planStartDate }} 工期:{{ node.duration }}</view>
        <view><text :style="{ color: node.progress === 100 ? 'blue' : 'red' }">进度:{{ node.progress }}</text></view>
      </view>
    </view>
    <!-- 子节点渲染 -->
    <view v-if="isOpen" style="padding-left: 20px;">
      <tree-node v-for="child in node.children" :key="child.projectPlanId" :node="child" />
    </view>
  </view>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const isOpen = ref(false);

    const hasChildren = computed(() => {
      return props.node.children && props.node.children.length > 0;
    });

    const toggle = () => {
      if (hasChildren.value) {
        isOpen.value = !isOpen.value;
      }
    };
	
	const nav=(projectPlanId,progress)=>{
		if(progress===100)return
		uni.navigateTo({
			url:`/pages/projectSubmission/newProjectSubmission?projectPlanId=${projectPlanId}`
		})
	}

    return {
      isOpen,
      hasChildren,
      toggle,
	  nav
    };
  },
};
</script>

<style scoped lang="scss">
/* 样式可以根据你的需求进行调整 */
.list {
  display: flex;
  margin: 10px;
  padding: 5px 0;
  background-color: white;
  .icon {
    margin: 0px 15px;
    display: flex;
    align-items: center;
  }
  .container {
    font-size: 15px;
    color: #666666;
  }
}
</style>
